import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { List, InputItem, Picker, Button, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import './EditAddress.less';

import SeperateLine from 'common/components/SeperateLine.js';
import Header from 'common/components/Header.js';

import * as common from 'common/common.js';
import * as userApi from 'common/api/UserApi.js';

const district = userApi.getAreaData();
const Item = List.Item;

/**
 * 地址编辑组件
 * @param {state} 路由参数
 */
class EditAddress extends Component{
	
	constructor(props) {
		super(props);
  	}

  	componentDidMount() {
  		//初始化表单数据
    	this.props.form.setFieldsValue({
      		...this.props.location.state,
      		areaIds: [
        		this.props.location.state.provinceId,
        		this.props.location.state.cityId,
        		this.props.location.state.areaId
      		]
    	});
  	}
  	
  	//保存地址
  	onSubmit = () => {
  		const fieldsValue = this.props.form.getFieldsValue();
  		
  		//联系人,联系电话,详细地址
  		const receiverName = fieldsValue.receiverName;
  		const phone = fieldsValue.phone;
  		const address = fieldsValue.address;
  		
  		//地址信息
  		const provinceId = fieldsValue.areaIds[0];
	    const cityId = fieldsValue.areaIds[1];
	    const areaId = fieldsValue.areaIds[2];
	
		console.log(fieldsValue)
  		if(!receiverName || receiverName == ""){
  			Toast.info("请填写收件人", common.TIPS_INFO_DURATION);
  			return;
  		}
  		if(!phone || phone == ""){
  			Toast.info("请填写联系方式", common.TIPS_INFO_DURATION);
  			return;
  		}
  		if(!address || address == ""){
  			Toast.info("请填写详细地址", common.TIPS_INFO_DURATION);
  			return;
  		}
  		if(!provinceId || provinceId == ""){
  			Toast.info("请选择省", common.TIPS_INFO_DURATION);
  			return;
  		}
  		if(!cityId || cityId == ""){
  			Toast.info("请选择市", common.TIPS_INFO_DURATION);
  			return;
  		}
  		if(!areaId || areaId == ""){
  			Toast.info("请选择区", common.TIPS_INFO_DURATION);
  			return;
  		}
  		
  		if(!this.props.params.addressId){
  			//新增地址
	  		userApi.addAddress({
	  			memberId: common.userId(),
	  			receiverName: receiverName,
				address: address,
	  			phone: phone,
	  			provinceId: provinceId ,
	  			cityId: cityId,
	  			areaId: areaId
	  		}).then(result => {
	  			if(result.code == common.SUCCESS){
	  				Toast.info("保存成功", common.TIPS_INFO_DURATION);
	  				setTimeout(() => {
	  					common.goBack();
	  				}, 1000);
	  			}
	  		})
  		}else{
  			//修改地址
	  		userApi.updateAddress({
	  			addressId: this.props.params.addressId,
	  			memberId: common.userId(),
	  			receiverName: receiverName,
				address: address,
	  			phone: phone,
	  			provinceId: provinceId ,
	  			cityId: cityId,
	  			areaId: areaId
	  		}).then(result => {
	  			if(result.code == common.SUCCESS){
	  				Toast.info("保存成功", common.TIPS_INFO_DURATION);
	  				setTimeout(() => {
	  					common.goBack();
	  				}, 1000);
	  			}
	  		})
  		}
  		
  	}
	
	render(){
		const { getFieldProps, getFieldError } = this.props.form;
		
		return(
			<div className="edit_address">
				<Header title={"编辑地址"}></Header>
				<SeperateLine lineHeight={"0.9rem"}></SeperateLine>
				<div className="inputBox">
				 	<List>
			          	<InputItem {...getFieldProps('receiverName')}>
				          	<div className="label-img" style={{backgroundImage: 'url("assets/img/name.png")'}}>
				          		<span>联系姓名</span>
				          	</div>
			          	</InputItem>
			          	<InputItem {...getFieldProps('phone')}>
				          	<div className="label-img" style={{backgroundImage: 'url("assets/img/phone.png")'}}>
				          		<span>手机号码</span>
				          	</div>
			          	</InputItem>
			          	<Picker data={district} title="选择地区" {...getFieldProps('areaIds')}>
			          		<List.Item arrow="horizontal">
			          			<div className="label-img" style={{backgroundImage: 'url("assets/img/address.png")'}}>
					          		<span>地址信息</span>
					          	</div>
			          		</List.Item>
			        	</Picker>
			        	<InputItem {...getFieldProps('address')}>
				          	<div className="label-img" style={{backgroundImage: 'url("assets/img/detail.png")'}}>
				          		<span>详细地址</span>
				          	</div>
			          	</InputItem>
			          	<Item>
				          	<Button onClick={this.onSubmit.bind(this)} type='primary'>保存</Button>
				        </Item>
			        </List>
				</div>
			</div>
		)
	}
}

export default withRouter(
  createForm()(EditAddress)
);